<template>
    <div id="replay">
      <div class="item">
        <div class="player" ref="player">
          <video-player  class="vjs-custom-skin"
              ref="videoPlayer2"
              :options="playerOptions"
              :playsinline="true"
              @play="onPlayerPlay($event)"
              @pause="onPlayerPause($event)"
              @ended="onPlayerEnded($event)"
              @loadeddata="onPlayerLoadeddata($event)"
              @waiting="onPlayerWaiting($event)"
              @playing="onPlayerPlaying($event)"
              @timeupdate="onPlayerTimeupdate($event)"
              @canplay="onPlayerCanplay($event)"
              @canplaythrough="onPlayerCanplaythrough($event)"
              @ready="playerReadied"
              @statechanged="playerStateChanged($event)">
          </video-player>
          <div class="tanmu" style="height:calc(100px)" ref="barrage_wrap" :class="{on:active}"></div>
          <div class="tanmu2" style="height:calc(100px)" ref="barrage_wrap2" :class="{on:active}"></div>
        </div>
      </div>
    </div>
</template>
<script>
// custom skin css
// import './video-js.css'
import 'videojs-flash'
export default {
  data() {
    return {
      // videojs options
      flag: true,
      flag2: true,
      active: false,
      value: '',
      switch1: false,
      height: 0,
      width: 0,
      danmu: [
        {
          time: 12,
          text: '666',
          color: 'red',
          show: true
        },
        {
          time: 13,
          text: 'qqqq',
          color: 'green',
          show: true
        },
        {
          time: 14,
          text: 'wwww',
          color: 'blue',
          show: true
        },
        {
          time: 16,
          text: '161616',
          color: '#fff',
          show: true
        },
        {
          time: 18,
          text: '181818',
          color: '#fff',
          show: true
        }
      ],
      danmu2: [
        {
          time: 12,
          text: '666',
          color: 'red',
          show: true
        },
        {
          time: 13,
          text: 'qqqq',
          color: 'green',
          show: true
        },
        {
          time: 14,
          text: 'wwww',
          color: 'blue',
          show: true
        },
        {
          time: 16,
          text: '161616',
          color: '#fff',
          show: true
        },
        {
          time: 18,
          text: '181818',
          color: '#fff',
          show: true
        }
      ]
    }
  },
  mounted() {
    this.send = this.$start(this.$refs.barrage_wrap)
    this.send2 = this.$start(this.$refs.barrage_wrap2)
    console.log(this.$refs.player.clientHeight)
    this.height = this.$refs.player.clientHeight
    this.width = this.$refs.player.clientWidth

    setTimeout(() => {
      console.log('dynamic change options', this.player)
      // change src
      // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
      // change item
      // this.$set(this.playerOptions.sources, 0, {
      //   type: "video/mp4",
      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
      // })
      // change array
      // this.playerOptions.sources = [{
      //   type: "video/mp4",
      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
      // }]
      this.player.muted(false)
    }, 5000)
  },
  computed: {
    player() {
      return this.$refs.videoPlayer2.player
    },
    playerOptions() {
      return {
        height: this.height,
        width: this.width,
        autoplay: false,
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0, 2.5],
        fluid: true,
        sources: [
          {
            // mp4
            type: 'video/mp4',
            src: 'http://192.168.201.91:8090/test1.ts'
            // type: 'rtmp/mp4',
            // src:'rtmp://202.69.69.180:443/webcast/bshdlive-pc'
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }
        ],
        techOrder: ['flash', 'html5'],
        poster:
          'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg',
        controlBar: {
          captionsButton: false,
          chaptersButton: false,
          playbackRateMenuButton: true,
          LiveDisplay: true,
          subtitlesButton: false,
          remainingTimeDisplay: true,

          progressControl: true,

          volumeMenuButton: {
            inline: false,
            vertical: true
          }, //竖着的音量条
          fullscreenToggle: true
        }
      }
    }
  },
  methods: {
    // listen event
    onPlayerPlay(player) {
      this.active = true
      // console.log('player play!', player)
      if (this.flag) {
        var newbtn = document.createElement('btn')
        newbtn.innerHTML = '<div style="line-height:32px">弹幕开</div>'
        newbtn.onclick = () => {
          console.log('666')
          this.active = !this.active
          if (this.active) {
            newbtn.innerHTML = '<div style="line-height:32px">弹幕开</div>'
          } else {
            newbtn.innerHTML = '<div style="line-height:32px">弹幕关</div>'
          }
        }
        var controlBar = document.getElementsByClassName('vjs-control-bar')[0]
        var insertBeforeNode = document.getElementsByClassName(
          'vjs-fullscreen-control'
        )[0]
        var insertAftereNode = document.getElementsByClassName(
          'vjs-playback-rate'
        )[0]
        controlBar.insertBefore(newbtn, insertBeforeNode)
        this.flag = false
      }
    },
    onPlayerPause(player) {
      // console.log('player pause!', player)
    },
    onPlayerEnded(player) {
      // console.log('player ended!', player)
    },
    onPlayerLoadeddata(player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting(player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying(player) {
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate(player) {
      console.log('player Timeupdate!', player.currentTime())

      // if (this.danmu[this.index]) {
      //   if (
      //     player.currentTime() > this.danmu[this.index].time &&
      //     this.index == this.danmu[this.index].index
      //   ) {
      //     this.send({
      //       text: this.danmu[0].text,
      //       color: this.danmu[0].color,
      //       speed: 3
      //     })
      //     this.index++
      //   }
      // }
      this.danmu.forEach(item => {
        if (player.currentTime() > item.time) {
          if (item.show) {
            this.send({
              text: item.text,
              color: item.color,
              speed: 3
            })
            item.show = false
          }
        } else {
          item.show = true
        }
      })
      this.danmu2.forEach(item => {
        if (player.currentTime() > item.time) {
          if (item.show) {
            this.send2({
              text: item.text,
              color: item.color,
              speed: 3
            })
            item.show = false
          }
        } else {
          item.show = true
        }
      })
    },
    onPlayerCanplay(player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough(player) {
      // console.log('player Canplaythrough!', player)
    },
    // or listen state event
    playerStateChanged(playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },
    // player is ready
    playerReadied(player) {
      // seek to 10s
      console.log('example player 1 readied', player)
      player.currentTime(10)
      // console.log('example 01: the player is readied', player)
    },
    change(status) {
      this.$Message.info('开关状态：' + status)
    },
    sendon() {
      console.log('111')
      this.send({
        text: '666',
        color: 'green'
      })
    },
    danmuSwich() {
      console.log('danmukaiguan')
    }
  }
}
</script>
<style lang="scss">
#replay {
  height: 100vh;
  box-sizing: border-box;
  & > .item {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    & > .player {
      flex: 1;
      height: 100%;
      position: relative;
      & > .vjs-custom-skin {
        width: 100%;
        height: 100%;
      }
      .vjs-control-bar {
        opacity: 1;
        visibility: visible;
      }
      .video-js {
        height: 100%;
      }
      .vjs-big-play-button {
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
      .vjs-paused.vjs-has-started.vjs-custom-skin
        > .video-js
        .vjs-big-play-button,
      .video-js.vjs-ended .vjs-big-play-button,
      .video-js.vjs-paused .vjs-big-play-button {
        display: block;
      }
      & > .tanmu {
        position: absolute !important;
        left: 0;
        top: 0;
        width: 100%;
        border: 1px solid red;
        display: none;
        z-index: 10000000000;
      }
      & > .tanmu2 {
        position: absolute !important;
        left: 0;
        top: 100px;
        width: 100%;
        border: 1px solid green;
        display: none;
        z-index: 10000000000;
      }
      & > .on {
        display: block;
      }
    }
  }
}
</style>
